<?php
/**
 * Created by PhpStorm.
 * User: l
 * Date: 2018/11/20
 * Time: 11:21
 */
use app\assets\AppAsset;
use app\common\CommonHelper;

AppAsset::register($this);

$base = Yii::$app->request->baseUrl;

AppAsset::addCss($this,$base . '/app/css/dynamic-detail.css?V=0.0.9');

AppAsset::addCss($this,$base . '/app/css/skin/jedate.css');
AppAsset::addScript($this,$base . '/app/js/jedate.js');
AppAsset::addScript($this,$base . '/app/js/app-js.js');

$model = new CommonHelper();

$tomorrowDate = $model->getTomorrowDateHI();
$yesterdayDate = $model->getYesterdayDateHI();
$baseUrlHead  = $model->getIp();
?>
<div class="search-box">

    <div class="search-box" style="margin-top: 0;margin-bottom: 1.67rem">

        <span style="float: left;margin-left:1.67rem;font-size: 14px;line-height: 3.3rem">派对状态：</span>

        <select id="partyType" style="float: left" onchange="searchFunction()">
            <option value="-1">所有</option>
            <option value="0">上架</option>
            <option value="1">下架</option>
        </select>

        <span style="float: left;margin-left:1.67rem;font-size: 14px;line-height: 3.3rem">发布者：</span>

        <select id="partyUser" style="float: left" onchange="searchFunction()">
            <option value="-1">全部</option>
            <option value="0">真实用户</option>
            <option value="1">马甲</option>
        </select>

        <span style="float: left;margin-left:1.67rem;font-size: 14px;line-height: 3.3rem">排序规则：</span>

        <select id="partySort" style="float: left" onchange="searchFunction()">
            <option value="-1">默认</option>
            <option value="0">连接人数倒序</option>
        </select>

        <div class="clear"></div>
    </div>

    <p class="datep" style="margin-left: 1.67rem;">
        <img src="<?=$base?>/app/images/new/rc_icon_date.png" class="date-icon">
        <input class="datainp" id="datebut" type="text" placeholder="请选择"  readonly>

    </p>

    <span class="date-split">至</span>

    <p class="datep">

        <img src="<?=$base?>/app/images/new/rc_icon_date.png" class="date-icon">
        <input class="datainp" id="datebut2" type="text" placeholder="请选择"  readonly>
    </p>

    <select id="cityID" style="margin-left:1.67rem;float: left" onchange="searchFunction()">
        <option value="-1">所在城市</option>
        <option value="179">杭州市</option>
        <?php for($index=0;$index<count($cities);$index++){?>
            <option value="<?= $cities[$index]['city_code']?>"><?= $cities[$index]['city_name']?></option>
        <?php }?>
    </select>

    <div style="clear:both;"></div>

    <div class="datep" style="margin-left: 1.67rem;"><input id="nameId" class="name-input" placeholder="请输入"></div>

    <img id="search-img" onclick="searchFunction()" class="search-icon" style="margin-left: 1.67rem;" src="<?=$base?>/app/images/new/rc_btn_search_n.png">

    <div class="button-div" style="margin-left: 3.6rem" onclick="showVestDialog(0,-1)">新增</div>
    <div style="clear:both;"></div>
</div>

<div class="table-box" style="background: none">
    <table id="table" style="background: #FFFFFF;"></table>

    <div class="showContent" id="show_content" style="position: absolute;display: none;">
        <span class="content" id="content_id">test</span>
    </div>
</div>

<div id="chooseUser" class="dialog-operate" hidden="hidden">
    <div class="user-item-container">
        <p class="dialog-title">选择马甲<img style="float: right;margin-top: 6px;cursor: pointer" src="<?= $base?>/app/images/close.png" onclick="hideVestDialog()"></p>
        <div class="clear"></div>
        <div class="divider-line"></div>
        <div class="vest-box">
        </div>

        <div class="clear"></div>
        <table id="table3" hidden="hidden"></table>
    </div>
</div>

<div id="showUser" class="dialog-operate" hidden="hidden">
    <div class="user-item-container">
        <p class="dialog-title">选择马甲<img style="float: right;margin-top: 6px;cursor: pointer" src="<?= $base?>/app/images/close.png" onclick="hideVestDialog()"></p>
        <div class="clear"></div>
        <div class="divider-line"></div>
        <div class="vest-box">
        </div>

        <div class="clear"></div>
        <table id="table3" hidden="hidden"></table>
    </div>
</div>

<div id="addPartyDialog" class="dialog-operate" hidden="hidden">
    <div class="user-item-container">

        <p style="margin-top:1.67rem;text-align: center;font-size: 22px;font-weight: bold">创建派对</p>

        <div style="text-align: center">
            <input class="datep" style="float: none" id="partyTheme" placeholder="请输入派对主题" maxlength="15">
        </div>

        <div class="clear"></div>
        <div style="text-align: center">
            <select id="partyCityID">
                <option value="179">杭州市</option>
                <?php for($index=0;$index<count($cities);$index++){?>
                    <option value="<?= $cities[$index]['city_code']?>"><?= $cities[$index]['city_name']?></option>
                <?php }?>
            </select>
        </div>

        <div class="footer-div">
            <div class="button-div" onclick="createPartyController.createPartyFunc()">确定</div>
            <div class="button-div" style="margin-left: 1.5rem" onclick="hideDialog()">取消</div>
        </div>
    </div>
</div>

<script>
    //初始化事件控件的日期
    var tomorrowDate = '<?php echo $tomorrowDate?>';
    var yesterdayDate = '<?php echo $yesterdayDate?>';
    $("#datebut").val("2018-09-01 00:00");
    $("#datebut2").val(tomorrowDate);
    //初始化表格设置
    $('#table').bootstrapTable({

//        height: 525,//高度
        toolbar: '#toolbar',        //工具按钮用哪个容器
        clickToSelect: true,//点击行即可选中单选/复选框
        singleSelect: false,//复选框只能选择一条记录
        search: false,//是否显示右上角的搜索框
        striped: true,      //是否显示行间隔色
        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sidePagination: "server", //服务端处理分页
        pagination: true,     //是否显示分页（*）
        sortable: false,           //是否启用排序
        sortOrder: "asc",          //排序方式
        method: 'GET',      //请求方式（*）
        pageNumber:1,      //初始化加载第一页，默认第一页
        pageSize: 10,      //每页的记录行数（*）
//        pageList: [10, 20, 50, 100],  //可供选择的每页的行数（*）
        cardView: false,          //是否显示详细视图
        queryParams:setParams,
        uniqueId:'party_id',
        url:'party',
        responseHandler:dataProcess,

        columns: [{
            field: 'party_id',
            align: 'center',
            valign: 'middle',
            title: '派对ID'
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '派对主题',
            formatter:function(value,row,index) {

                var str = row.party_theme;
                var html = '';
                if(str.length > 65){
                    html = '<div id="content_text' + index + '" class="content-push-body" content="'+str +'" onmouseover="dialogShow(this)" onmouseout="dialogHide()"><span class="content-text">' + str + '</span></div>';
                }else{
                    html = '<div class="content-push-body"><span class="content-text">' + str + '</span></div>';
                }
                return html;
            }
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '城市',
            formatter:function(value,row,index) {
                return row.city_name;
            }
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '连接人数',
            formatter:function(value,row,index) {
                return row.partyrelation.length;
            }
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '状态',
            formatter:function(value,row,index) {
                return row.is_deleted == 0?"上架":"下架";
            }
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '发布者',
            formatter:function(value,row,index) {
                return row.user?row.user.user_nickname:"无";
            }
        },{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '操作',
            formatter:function(value,row,index) {
                var html = "";
                var mobile = row.user.mobile.substring(0,6);
                if (mobile == '168168') {
                    if(row.is_deleted == 0){
                        html = '<div class="btn_cancel" onclick="operateController.operateFunc('+row.party_id+',1)">下架</div>'
                    }else{
                        html = '<div class="btn_cancel" onclick="operateController.operateFunc('+row.party_id+',0)">上架</div>'
                    }
                } else {
                    if(row.is_deleted == 0){
                        html = '<div class="btn_cancel" onclick="operateController.operateFunc('+row.party_id+',1)">下架</div><div class="btn_cancel" onclick="showVestlog(-1,'+ row.user.user_id +')">开派对</div>'
                    }else{
                        html = '<div class="btn_cancel" onclick="operateController.operateFunc('+row.party_id+',0)">上架</div>'
                    }
                }
                return html;
            }
        }]
    });

    function dataProcess(res){
        var data = res;
        return {
            'rows':data.rows,
            'total':data.total
        }

    }
    function setParams(params){

        var start_date = $('#datebut').val(); //按日期搜索
        var end_date = $('#datebut2').val();

        if (start_date == "2018-09-01 00:00") {
            var start_date = undefined; //按日期搜索
            var end_date = undefined;
        }
        
        if (start_date && start_date != undefined && end_date && end_date != undefined){
            params.start_date = start_date;
            params.end_date = end_date;
        }

        var content = $("#nameId").val();
        if (content && content != undefined && content.length > 0){
            params.party_theme = content;
        }

        var partyType = $("#partyType").val();
        if(partyType != -1) {
            params.is_deleted = partyType;
        }

        var partySort = $("#partySort").val();
        if (partySort != -1) {
            params.partyrelation_length = 0;
        }

        var cityCode = $("#cityID").val();
        if(cityCode != -1){
            params.city_code = cityCode;
        }

        var partyUser = $("#partyUser").val();
        if(partyUser != -1){
            params.party_user = partyUser;
        }

        var partySort = $("#partySort").val();
        if(partySort != -1){
            params.party_user = partySort;
        }
        return params;
    }

    function searchFunction(){
        $('#table').bootstrapTable('refreshOptions', {pageNumber: 1});
    }

    var operateController = {
        operateApi : "party",
        operateFunc:function(dynamic_id , type){

            var confirmStr = "确认下架派对吗？";

            if(type == 0)
                confirmStr = "确认上架派对吗？";

            if(confirm(confirmStr)){
                var param = {
                    party_id:dynamic_id,
                    type:type
                };

                sendAjax(this.operateApi,"POST",param,true,function(res){
                    var data = JSON.parse(res);
                    if(data.code == 0)
                        $('#table').bootstrapTable('refresh');
                });
            }

        }
    };
</script>

<script>

    //初始化表格设置
    $('#table3').bootstrapTable({

//        height: 525,//高度
        toolbar: '#toolbar',        //工具按钮用哪个容器
        clickToSelect: true,//点击行即可选中单选/复选框
        singleSelect: false,//复选框只能选择一条记录
        search: false,//是否显示右上角的搜索框
        striped: true,      //是否显示行间隔色
        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sidePagination: "server", //服务端处理分页
        pagination: true,     //是否显示分页（*）
        sortable: false,           //是否启用排序
        sortOrder: "asc",          //排序方式
        method: 'GET',      //请求方式（*）
        pageNumber:1,      //初始化加载第一页，默认第一页
        pageSize: 10,      //每页的记录行数（*）
//        pageList: [10, 20, 50, 100],  //可供选择的每页的行数（*）
        cardView: false,          //是否显示详细视图
        onPageChange:function(){$('#table3').bootstrapTable('hideLoading');},//隐藏数据加载中
        uniqueId:'user_id',
        url:'vest-data',
        responseHandler:dataUserProcess,

        columns: [{
            field: '',
            align: 'center',
            valign: 'middle',
            title: '用户列表',
            formatter:function(value,row,index) {
                $('.fixed-table-body').eq(2).css('height','0px');
                $('.pull-left').eq(2).hide(); //隐藏数据加载中
            }
        }]
    });
    $('.fixed-table-container').eq(2).css('border','none');
    $('#table3').bootstrapTable('hideLoading'); //隐藏数据加载中

    function dataUserProcess(res){
        var result = res;

        $(".vest-box").empty();
        var html = "";
        var datas = result.rows;
        for(var index = 0 ; index < datas.length; index ++){
            var data = datas[index];
            if (data.is_deleted != 1) {
                html +='<div class="vest-item">'+
                '<img class="vest-avatar" src="'+data.user_avatar+'">'+
                '<span class="vest-message">'+getCommentUserMessage(data.user_nickname,data.user_sex,data.city_name)+'</span>'+
                '<span class="vest-choose" userid="'+data.user_id+'" usertoken="'+data.token+'" onclick="chooseVest(this)">选择</span>'+
                '</div>';
            }
        }
        $(".vest-box").append(html);

        return {
            'rows':result.rows,
            'total':result.total
        }

    }

    var chooseVestType = 0;
    var targetUserId;
    var vestId;
    var vestToken;

    function chooseVest(view){
        vestId = $(view).attr("userid");

        if(chooseVestType == 0){
            vestToken = $(view).attr("usertoken");
            $("#addPartyDialog").show();
        }else{
            goToChat(vestId);
        }
        hideVestDialog();
    }
    function goToChat(userId){
        window.open("chatlist-party?user_id="+userId+"&target_user_id="+targetUserId);
    }

    function showVestDialog(type,user_id){
        chooseVestType = type;
        if(type != 0)
            targetUserId = user_id;
        $("#chooseUser").show();
    }

    function hideVestDialog(){

        $("#chooseUser").hide();
    }

    function showVestlog(type,user_id){
        chooseVestType = type;
        if(type != 0){
            targetUserId = user_id;
        }
        $("#chooseUser").show();
    }

    function hideVestlog(){
        $("#showUser").hide();
    }

    function getCommentUserMessage(name,sex,area){
        var userString = "";
        userString += name;

        if(sex == 0)
            userString +="（女，";
        else
            userString +="（男，";

        userString +=area + "）";

        return userString;
    }
</script>

<script>
    var createPartyController = {
        createPartyApi:'<?= $baseUrlHead?>Hotcity/v1/parties',
        createPartyFunc:function(){
            var partyTheme = $("#partyTheme").val();
                if(partyTheme.length < 1){
                    alert("请输入派对主题");
                    return;
                }

            var param = {
                user_id:vestId,
                token:vestToken,
                city_code:$("#partyCityID").val(),
                party_theme:partyTheme
            };

            $('.loading-area').show();
            sendAjax(this.createPartyApi,"POST",param,false,function(res){
                var row = JSON.parse(res)
                if(row.code == 1){
                    $("#partyTheme").val("");
                    $('#table3').bootstrapTable('refresh');
                    alert(row.msg);
                    $("#addPartyDialog").hide();
                    location.reload();
                }else{
                    alert(row.msg);
                }
            });
        }
        
    };

    function hideDialog(){
        $("#addPartyDialog").hide();
    }
</script>